<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb>
        <a-breadcrumb-item>应付费用类型</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="pageContentWhole">
      <a-row>
        <a-col :span="24">
            <a-form layout="inline">
              <a-form-item label="费用类型">
                  <a-input v-model="searchForm.feeNameLike"/>
              </a-form-item>
              <a-form-item label="状态">
                <a-select v-model="searchForm.status" class="selectWidth">
                  <a-select-option value="">全部</a-select-option>
                  <a-select-option :value="0">冻结</a-select-option>
                  <a-select-option :value="1">正常</a-select-option>
                   <!-- 0冻结 1启用 -->
                </a-select>
              </a-form-item>

              <a-form-item>
                <a-button type="primary" @click="handleSubmit1">查询</a-button>
              </a-form-item>
              <a-form-item>
                <a-button type="primary" @click="handleCreate">+  创建类型</a-button>
              </a-form-item>
            </a-form>

            <a-table :loading='loading' :columns="columns" :data-source="tableData" class="tableMargin" :pagination="pagination" rowKey="id">
              <template slot="rn" slot-scope="text, record, index">{{index + 1}}</template>
              <template slot="operation" slot-scope="text, record">
                  <a @click="editIt(record.id)">编辑</a>
                </template>
            </a-table>
        </a-col>
      </a-row>

      <a-modal
        :visible="visible"
        :title="optTitle"
        :destroyOnClose='true'
        :confirmLoading="confirmLoading"
        @ok='handleOk'
        @cancel='handleCancel'
      >
        <a-form-model ref="form" :model="form" :rules="rules"
          :label-col="{span: 6}"
          :wrapper-col="{span: 16}">
          <a-form-model-item prop="feeName" label="费用类型名称">
            <a-input v-model="form.feeName" :max-length="20"/>
          </a-form-model-item>
          <a-form-model-item prop="currencyType" label="结算币种">
            <a-select v-model="form.currencyType" class="selectWidth">
              <a-select-option value="">请选择</a-select-option>
              <a-select-option value="CNY">人民币</a-select-option>
              <a-select-option value="USD">美元</a-select-option>
              <a-select-option value="CNY,USD">人民币/美元</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item prop="status" label="状态">
            <a-select v-model="form.status" class="selectWidth">
              <a-select-option :value="0">冻结</a-select-option>
              <a-select-option :value="1">正常</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </div>
  </div>
</template>

<script>
import {queryCustFeeTypePageList, addCustFeeType, editCustFeeType, getCustFeeTypeById} from '@/api'

const CurrencyType = {
  CNY: '人民币',
  USD: '美元',
  'CNY,USD': '人民币/美元'
}
const moduleType = {
  belongCompany: 'JIA_CHUANG',
  feeType: 2
}
const fomrMessage = `必填项不能为空`
const defaultForm = () => ({
  id: null,
  feeName: '',
  currencyType: '',
  status: 1
})

export default {
  data () {
    return {
      loading: false,
      searchForm: {
        ...moduleType,
        nameLike: '',
        status: ''
      },
      columns: [{
        title: '序号',
        width: 60,
        scopedSlots: {customRender: 'rn'}
      }, {
        title: '应付费用类型',
        dataIndex: 'feeName',
        ellipsis: true
      }, {
        title: '结算币种',
        dataIndex: 'currencyType',
        customRender: (text, row, index) => {
          return CurrencyType[text]
        }
      }, {
        title: '状态',
        dataIndex: 'status',
        customRender: (text, row, index) => {
          if (text === 1) {
            return <a-badge status="success" text="正常"/>
          } else if (text === 0) {
            return <a-badge status="error" text="冻结"/>
          }
        }
      }, {
        title: '操作',
        width: 100,
        scopedSlots: {customRender: 'operation'}
      }],
      tableData: [],
      pagination: {},
      pageNum: 1,
      pageSize: 10,
      // modal
      visible: false,
      optTitle: '',
      form: {
        ...moduleType,
        ...defaultForm()
      },
      rules: {
        feeName: [{required: true, message: fomrMessage, trigger: 'blur'}],
        status: [{required: true, message: fomrMessage, trigger: 'change'}],
        currencyType: [{required: true, message: fomrMessage, trigger: 'change'}]
      },
      confirmLoading: false
    }
  },
  methods: {
    handleSubmit1 () {
      this.pageNum = 1
      this.handleSubmit()
    },
    handleSubmit () {
      this.loading = true
      queryCustFeeTypePageList({
        ...this.searchForm,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(rsp => {
        this.loading = false
        this.tableData = rsp.data.list
        this.pagination = {
          current: this.pageNum,
          pageSize: rsp.data.pageSize,
          total: rsp.data.total,
          showQuickJumper: false,
          showSizeChanger: true,
          showTotal: total => `共${total}条记录 第${this.pageNum}/${rsp.data.pages}页`,
          onChange: pageNum => {
            this.pageNum = pageNum
            this.handleSubmit()
          },
          onShowSizeChange: (current, size) => {
            this.pageNum = current
            this.pageSize = size
            this.handleSubmit()
          }
        }
      })
    },
    handleCreate () {
      if (!this.$root._bc.create) {
        this.$message.error('您无此权限！')
        return
      }
      Object.assign(this.form, defaultForm())
      this.visible = true
      this.optTitle = '创建费用类型'
    },
    editIt (id) {
      if (!this.$root._bc.edit) {
        this.$message.error('您无此权限！')
        return
      }
      this.visible = true
      this.optTitle = '编辑费用类型'
      getCustFeeTypeById({id}).then(rsp => {
        Object.assign(this.form, rsp.data)
      })
    },
    handleOk () {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.confirmLoading = true
          if (this.form.id) {
            editCustFeeType(this.form).then(rsp => {
              this.visible = false
              this.$message.success('保存成功')
              this.handleSubmit()
              setTimeout(() => { this.confirmLoading = false }, 1000)
            }).catch(() => { this.confirmLoading = false })
          } else {
            addCustFeeType(this.form).then(rsp => {
              this.visible = false
              this.$message.success('保存成功')
              this.handleSubmit()
              setTimeout(() => { this.confirmLoading = false }, 1000)
            }).catch(() => { this.confirmLoading = false })
          }
        }
      })
    },
    handleCancel () {
      this.visible = false
      Object.assign(this.form, defaultForm())
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.handleSubmit()
    })
  }
}
</script>

<style lang="less" scoped>
</style>
